<template>
	<statusBarVue title="论坛详情" :isShowBar="true" :isShowLeft="true" :isMyBgi="true" />
	<view class="topic-details-page" :style="pageHaveBarStyle">
		<view class="topic-details-scroll-view">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="mescrolTop"
				:down="mescrolDown" :fixed="false">
				<view class="topic-details-group">
					<view class="topic-details-contents">
						<!-- 作者信息 -->
						<view class="author-group">
							<view class="author-info">
								<image class="user" :src="topic.user.avatar" />
								<text class="user-name">{{topic.user.nick}}</text>
								<text class="edit-time">
									{{ handleTimeStrToTimeStamp(topic.ts) }}
								</text>
							</view>
						</view>
						<!-- 内容 -->
						<view class="contents">
							<view class="tit">
								{{topic.title}}
							</view>
							<view class="content" v-for="(v, i) in topic.contents" :key="'topic-'+i">
								<view v-if="v.content_type === 0" class="text">{{v.content}}</view>
								<view v-if="v.content_type === 1" class="imgs">
									<image :src="v.href" @click="handlePreviewImage(v.href)" class="img" />
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="topic-details-group">
					<view class="topic-details-replies">
						<view class="topic-details-replies-tit">
							回复：
						</view>
						<view class="topic-details-replies-con">
							<view class="replie-item" v-for="(v,i) in replies" :key="'replie-'+i">
								<view class="author-group">
									<image class="user" :src="v.user.avatar" />
									<text class="user-name">{{v.user.nick}}</text>
								</view>

								<view class="replie-item-con">
									{{v.content}}
								</view>
								<view class="replie-item-foo">
									<text class="edit-time">
										{{ handleTimeStrToTimeStamp(v.ts) }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>

		<view class="replies-input-key">
			<input class="input" placeholder="请输入" v-model="inp" :adjust-position="false" focus />
			<button class="send" size="mini" type="primary" @click="handleSend" :disabled="!(inp.length)">发送</button>
		</view>
	</view>
</template>

<script>
	import statusBarVue from '@/components/statusBar.vue';

	import {
		getTopicDetails,
		postTopicReplies
	} from '@/utils/api.js'

	import {
		publics
	} from '@/mixins/publics.js';

	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [publics, MescrollMixin],
		components: {
			statusBarVue
		},
		data() {
			return {
				topic: {
					user: {}
				},
				mescrolTop: {
					use: true
				},
				mescrolDown: {
					use: true,
					auto: false,
					mustToTop: true
				},
				ph: 0,
				tops: [],
				showBtn: false,
				replies: [],
				inp: '',
				topicId: '',
				fid: ''
			}
		},
		onShareAppMessage(){
			// 监听用户右上角的转发
		},
		onShareTimeline(){
			// 监听用户右上角的分享到朋友圈
		},
		onLoad(options) {
			this.topicId = options.topicId;
			this.showBtn = options.showBtn;
			this.fid = options.fid;
		},
		onShow() {
			this.mescroll.triggerDownScroll();
		},
		methods: {
			upCallback(page) {
				this.getTopicDetailsApi(this.topicId);
			},
			// 发送评论
			postTopicRepliesApi(postData) {
				postTopicReplies(postData).then(res => {
					if (res.code === 200) {
						this.inp = '';
						this.getTopicDetailsApi(this.topicId);
					}
				})
			},
			// 查询详情
			getTopicDetailsApi(topicId) {
				getTopicDetails(topicId).then(res => {
					if (res.code === 200) {
						this.topic = res.data.topic;
						this.tops = res.data.tops;
						this.replies = res.data.replies;
						this.mescroll.endSuccess(10, false);
					}
				}).catch(data => {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				})
			},

			handleSend() {
				let postData = {
					fid: this.topicId,
					content: this.inp,
					ref_id: this.fid,
					hrefs: []
				};
				this.postTopicRepliesApi(postData);
			}
		}
	}
</script>

<style lang="scss">
	.topic-details-page {
		background-color: #F1F3F4;
		position: relative;
		left: 0;
		right: 0;
		z-index: 99;
		overflow: hidden;

		.topic-details-scroll-view {
			overflow: auto;
			height: 100%;
		}

		.topic-details-group {
			width: 94.67vw;
			margin: 12px auto;
			background-color: #fff;
			box-sizing: border-box;
			padding: 12px;
			border-radius: 10px;

			.topic-details-contents {
				.author-group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 6px;

					.author-info {
						height: 30px;
						line-height: 30px;
						font-weight: 400;
						display: flex;
						align-items: center;
						flex-direction: row;

						.user {
							font-size: 16px;
							width: 26px;
							height: 26px;
							margin-right: 9px;
							border-radius: 26px;
						}

						.user-name {
							font-size: 14px;
							color: #1E1F23;
							margin-right: 11px;
						}

						.edit-time {
							color: #9B9B9B;
							margin-right: 4px;
						}
					}
				}

				.contents {
					.tit {
						font-weight: 600;
						font-size: 15px;
						color: #1E1F23;
						line-height: 25px;
						margin-bottom: 3px;
					}


					.content {
						.text {
							font-weight: 400;
							font-size: 15px;
							color: #1E1F23;
						}

						.imgs {
							.img {
								width: 100px;
								height: 100px;
								border-radius: 4px;
								margin-right: 4px;
							}
						}

					}

				}
			}

			.topic-details-replies {
				&-tit {
					font-size: 16px;
					font-weight: bold;
					border-bottom: 1px solid #ddd;
					height: 34px;
					line-height: 30px;
				}

				&-con {
					padding: 10px 0;

					.author-group {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.user {
							width: 26px;
							height: 26px;
							margin-right: 9px;
							border-radius: 26px;
						}
					}

					.replie-item {
						border-bottom: 1px solid #d4d4d4;
						padding: 10px 0;

						&-con {
							padding: 6px 0px 6px 35px;
							font-size: 15px;
							color: #1E1F23;
						}

						&-foo {
							color: #b8b8b8;
							text-align: right;
							margin-top: 2px;
						}
					}
				}
			}
		}

		.replies-input-key {
			height: 38px;
			line-height: 38px;
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			padding: 8px 2.66vw calc(8px + env(safe-area-inset-bottom));
			background-color: #fff;

			.input {
				height: 44px;
				line-height: 44px;
				width: calc(100% - 70px);
				border-bottom: 1px solid #ddd;
			}

			.send {
				height: 100%;
				line-height: inherit;
				margin: 0;
			}
		}
	}
</style>